<template>
  <div class style="height: 100%">
    <div class="logo">
      <img src="../assets/logo.png" alt="logo">
    </div>
    <div class="menu">
      <div v-for="item in itemList" :key="item.id">
        <a-tooltip placement="right">
          <template #title>
            <span>{{item.name}}</span>
          </template>
          <div
            class="item-content"
            :class="item.iconName + ` ${item.actived ? 'active' : ''}`"
            @click="handleClick(item)"
          >
            <div v-if="item.appId !== 'message'" class="item" :title="item.name"></div>
            <a-badge
              :offset="[-3,0]"
              :numberStyle="{'transform': 'translate(50%, -50%) scale(0.8)'}"
              :count="unreadMsg"
              v-if="item.appId === 'message'"
              :overflowCount="999"
            >
              <div class="item" :title="item.name"></div>
            </a-badge>
          </div>
        </a-tooltip>
      </div>
    </div>
    <div ref="siderCard" class="sidercard">
      <sider-card></sider-card>
    </div>
  </div>
</template>

<script>
import SiderCard from "@/components/SiderCard.vue";
import { menus } from "@/router/menu";
export default {
  components: {
    SiderCard,
  },
  props: {},
  data() {
    return {
      itemList: menus
    };
  },
  mounted() {
    const pathname = document.location.pathname;
    this.itemList = this.itemList.map(v => {
        return {
          ...v,
          actived: pathname.includes(v['url']) ? true : false
        };
    });
  },
  methods: {
    handleClick(item) {
      this.itemList = this.itemList.map(v => {
        return {
          ...v,
          actived: v.appId === item.appId ? true : false
        };
      });
      this.$router.push({path: item['url']});
    }
  },
  computed: {
    unreadMsg() {
      return this.$store.state.messageCenter.unReadNum;
    }
  },
  watch: {
    $route: function (to) {
      this.itemList = this.itemList.map(v => {
        return {
          ...v,
          actived: to['path']===v['url'] ? true : false
        };
    });
    }
  }
};
</script>

<style scoped lang="less">
.logo {
  height: 63px;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    height: 34px;
  }
}

.menu {
  overflow: auto;
  height: calc(100% - 279px);
  &::-webkit-scrollbar {
    display: none;
  }
}

.sidercard {
  padding-top: 16px;
  padding-bottom: 24px;
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
}

.item-content {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  height: 50px;
  background-position: center center;
  background-repeat: no-repeat;
  // &:hover {
  //   background-color: #647bfc;
  // }
  &.active {
    // background-color: #647bfc;
  }
}
.item {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
// 首页
.shouye {
  background-image: url(~@/assets/首页.png);
  &:hover {
    background-image: url(~@/assets/首页_select.png);
  }
  &.active {
    background-image: url(~@/assets/首页_select.png);
  }
}
// 消息中心
.message {
  background-image: url(~@/assets/消息.png);
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(0.85);
  &:hover {
    background-image: url(~@/assets/消息_select.png);
    transform: scale(1.05);
  }
  &.active {
    background-image: url(~@/assets/消息_select.png);
    transform: scale(1.05);
  }
}
</style>
